<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title id="pageTitle"></title>
    <script src="/Style/js/tailwindcss.js"></script>
    <link href="/Style/css/font-awesome.min.css" rel="stylesheet">
    <link href="/Style/css/fonts.googleapis.com.css2" rel="stylesheet">
    <script src="/Style/js/jquery.min.v3.6.0 .js"></script>
    <script src="/Style/js/like.js"></script>
    <link href="/Style/css/like.css" rel="stylesheet" type="text/css">

    <!-- 头像上传模态框样式 -->
    <style>
        .avatar-upload-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }

        .modal-content {
            background-color: white;
            padding: 16px;
            border-radius: 10px;
            text-align: center;
            width: 92%;
            max-width: 400px;
        }

        .preview-container {
            width: 120px;
            height: 120px;
            margin: 0 auto 20px;
            border-radius: 50%;
            overflow: hidden;
            border: 3px solid #FF6B8B;
        }

        .preview-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .file-input {
            display: none;
        }

        .upload-btn {
            background-color: #FF6B8B;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 5px;
            cursor: pointer;
            margin: 8px 4px;
            font-size: 0.9rem;
        }

        .cancel-btn {
            background-color: #ccc;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 5px;
            cursor: pointer;
            margin: 8px 4px;
            font-size: 0.9rem;
        }

        /* 移动端菜单动画 */
        #mobileMenu {
            transition: all 0.3s ease;
            transform-origin: top center;
            transform: scaleY(0);
        }
        #mobileMenu:not(.hidden) {
            transform: scaleY(1);
        }
        #mobileMenu a {
            padding: 12px 0;
            border-bottom: 1px solid #f1f1f1;
        }
        #mobileMenu a:last-child {
            border-bottom: none;
        }

        /* 时间容器样式优化 */
        .time-container {
            padding: 12px 16px !important;
            width: 90% !important;
            max-width: 320px !important;
        }

        #tian, #shi, #fen, #miao {
            font-size: 1.5rem !important;
            margin: 0 2px !important;
        }

        .time-container span {
            font-size: 0.9rem !important;
        }

        /* 卡片区域响应式调整 */
        .card {
            padding: 16px !important;
        }

        .card .w-20 {
            width: 16vw !important;
            height: 16vw !important;
            max-width: 80px !important;
            max-height: 80px !important;
        }

        .card .w-12 {
            width: 10vw !important;
            height: 10vw !important;
            max-width: 40px !important;
            max-height: 40px !important;
        }

        .card .text-xl {
            font-size: 1.2rem !important;
        }

        /* 页脚移动端优化 */
        footer .flex {
            flex-direction: column !important;
        }

        footer .grid {
            width: 100% !important;
            margin-top: 1rem !important;
        }

        footer .mb-8 {
            margin-bottom: 1rem !important;
        }

        footer .text-center.md\:text-left {
            text-align: center !important;
        }

        footer .justify-center.md\:justify-start {
            justify-content: center !important;
        }

        /* 横幅文字响应式 */
        #home .wenan {
            font-size: clamp(1.2rem, 5vw, 2rem);
            line-height: 1.5;
            padding: 0 10px;
        }

        /* 个人资料弹窗样式 */
        #profile-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }



	/* 新增样式：强制不换行并限制最小宽度 */
    .avatar-row-container {
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap; /* 禁止文本换行 */
        min-width: 0; /* 允许容器收缩 */
    }
    .avatar-item {
        flex-shrink: 0; /* 头像不收缩 */
    }
    .love-icon {
        flex-shrink: 0; /* 心心不收缩 */
        margin: 0 8px; /* 调整心心与头像的间距 */
    }

    #footerLogo,#logoText {
            font-size: 1rem; /* 文字大小 */
            display: flex;
            align-items: center;
            gap: 0.5em; /* 文字与心形间距 */
        }
    .heart {
            position: relative;
            width: 0.8em; /* 心形宽度（与文字大小比例匹配） */
            height: 0.8em; /* 心形高度 */
            background-color: #ff3e6c;
            transform: rotate(-45deg);
            animation: beat 1s infinite;
        }

        .heart::before,
        .heart::after {
            content: '';
            position: absolute;
            width: 0.8em;
            height: 0.8em;
            background-color: #ff3e6c;
            border-radius: 50%;
        }

        .heart::before {
            top: -0.4em;
            left: 0;
        }

        .heart::after {
            top: 0;
            right: -0.4em;
        }
        
        
        

        @keyframes beat {
            0% { transform: rotate(-45deg) scale(1); }
            14% { transform: rotate(-45deg) scale(1.1); }
            28% { transform: rotate(-45deg) scale(1); }
            42% { transform: rotate(-45deg) scale(1.1); }
            70% { transform: rotate(-45deg) scale(1); }
        }
        
        
        /* 音乐控制器样式 */
		#musicController {
			animation: float 3s ease-in-out infinite;
		}

		@keyframes float {
			0% { transform: translateY(0px); }
			50% { transform: translateY(-10px); }
			100% { transform: translateY(0px); }
		}

		/* 音乐播放状态指示器 */
		#musicController.playing #musicIcon {
			animation: pulse 2s infinite;
		}

		@keyframes pulse {
			0% { transform: scale(1); }
			50% { transform: scale(1.1); }
			100% { transform: scale(1); }
		}
    </style>

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF6B8B',
                        secondary: '#6A82FB',
                        accent: '#FFD166',
                        neutral: '#F8F9FA',
                        dark: '#2D3748'
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                        notoserif: ['"Noto Serif SC"', 'serif']
                    },
                }
            }
        }

    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.3);
            }
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            }
            .bg-gradient-love {
                background: linear-gradient(135deg, #FF6B8B 0%, #6A82FB 100%);
            }
            .line-clamp-3 {
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
            .scroll-smooth {
                scroll-behavior: smooth;
            }
            .section-padding {
                padding-top: clamp(3rem, 8vh, 6rem);
                padding-bottom: clamp(3rem, 8vh, 6rem);
            }
            .avatar-clickable {
                cursor: pointer;
                transition: transform 0.3s ease;
            }
            .avatar-clickable:hover {
                transform: scale(1.05);
            }
        }

    </style>

    <link rel="shortcut icon" href="/favicon.ico"/>
    <meta name="keywords" content="BAO,Like Girl, 情侣小窝" id="pageKeywords">
    <meta name="description" content="喜欢花 喜欢浪漫 喜欢你.~">
</head>

<body class="font-inter bg-neutral min-h-screen scroll-smooth">
<!-- 导航栏 -->
<nav class="fixed w-full z-50 transition-all duration-300" id="navbar">
    <div class="container mx-auto px-3 sm:px-4 py-2 flex items-center justify-between">
        <div class="flex items-center space-x-2">
            <a class="alogo text-xl sm:text-lg font-bold" href="/" id="logoText"></a>
        </div>

        <div class="hidden md:flex items-center space-x-8">
            <a href="#home" class="wenan hover:text-primary transition-colors">首页</a>
            <a href="/moments" class="wenan hover:text-primary transition-colors">点点滴滴</a>
            <a href="/photos" class="wenan hover:text-primary transition-colors">Love Photo</a>
            <a href="/lovelist" class="wenan hover:text-primary transition-colors">Love List</a>
            <a href="/messages" class="wenan hover:text-primary transition-colors">留言板</a>
            <a href="/couple" class="wenan hover:text-primary transition-colors">爱情纪念</a>
        </div>
		<!-- 音乐播放控制 -->
		<div class="fixed right-6 bottom-24 z-40 bg-white rounded-full shadow-lg p-3 cursor-pointer hover:bg-primary/10 transition-colors" id="musicController">
			<i class="fa fa-music text-primary text-xl" id="musicIcon"></i>
		</div>

		<!-- 音频元素 -->
		<audio id="backgroundMusic" loop>
			<source src="/api/music" type="audio/mpeg">
			您的浏览器不支持音频播放
		</audio>
        <!-- 用户信息/登录按钮 -->
        <div class="flex items-center space-x-4" id="userArea">
            <!-- 已登录状态 (默认隐藏) -->
            <div class="hidden items-center space-x-3" id="loggedInArea">
                <!-- 添加了avatar-clickable类使头像可点击 -->
                <img src="" alt="用户头像" class="w-8 h-8 rounded-full border-2 border-white avatar-clickable"
                     id="userAvatar">
                <span class="text-white text-sm" id="userName"></span>
                <!-- 用户菜单按钮 -->
                <button class="text-white hover:text-primary transition-colors" id="user-menu-button">
                    <i class="fa fa-cog"></i>
                </button>
                <!-- 独立的退出登录按钮 -->
                <a href="/logout" class="text-white hover:text-primary transition-colors hidden md:inline-flex items-center">
                    <i class="fa fa-sign-out"></i>
                </a>
            </div>

            <!-- 未登录状态 -->
            <div id="loginArea">
                <a href="/login" class="text-white hover:text-primary transition-colors" id="loginBtn">
                    <i class="fa fa-user-circle"></i> 登录
                </a>
            </div>

            <button class="md:hidden text-white text-lg sm:text-xl" id="menuBtn">
                <i class="fa fa-bars"></i>
            </button>
        </div>
    </div>

    <!-- 移动端菜单 -->
    <div class="md:hidden hidden bg-white absolute w-full shadow-lg" id="mobileMenu">
        <div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
            <a href="/" class="text-dark hover:text-primary transition-colors py-2">首页</a>
            <a href="/moments" class="text-dark hover:text-primary transition-colors py-2">点点滴滴</a>
            <a href="/photos" class="text-dark hover:text-primary transition-colors py-2">Love Photo</a>
            <a href="/lovelist" class="text-dark hover:text-primary transition-colors py-2">Love List</a>
            <a href="/messages" class="text-dark hover:text-primary transition-colors py-2">留言板</a>
            <a href="/couple" class="text-dark hover:text-primary transition-colors py-2">爱情纪念</a>
            <div id="mobileUserArea">

                <a href="/login" class="text-dark hover:text-primary transition-colors py-2" id="mobileLoginBtn">登录</a>
                <div class="hidden flex items-center space-x-3 py-2" id="mobileLoggedInArea">
                    <img src="" alt="用户头像" class="w-6 h-6 rounded-full avatar-clickable" id="mobileUserAvatar">
                    <span class="text-dark text-sm" id="mobileUserName"></span>
                    <button class="text-dark hover:text-primary transition-colors" id="mobile-menu-button">
                        <i class="fa fa-cog"></i>
                    </button>
                </div>
                <a href="/logout" class="text-red-500 hover:text-red-600 transition-colors py-2 flex items-center justify-start pl-9">
                    <i class="fa fa-sign-out mr-2"></i> 退出登录
                </a>
            </div>
        </div>
    </div>
</nav>

<!-- 个人资料弹窗 -->
<div id="profile-modal">
    <div class="bg-white rounded-lg shadow-xl w-full max-w-md p-6 transform transition-all">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-lg font-medium text-gray-900">个人资料</h3>
            <button id="close-modal" class="text-gray-400 hover:text-gray-500">
                <span class="sr-only">关闭</span>
                <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>

        <div class="space-y-6">
            <!-- 展示用户名（不可修改） -->
            <div>
                <label class="block text-sm font-medium text-gray-700">账号</label>
                <p id="username"
                   class="mt-1 px-3 py-2 bg-gray-50 border border-gray-300 rounded-md text-sm text-gray-900"></p>
            </div>

            <!-- 昵称（可修改） -->
            <div>
                <label for="nickname" class="block text-sm font-medium text-gray-700">昵称</label>
                <input type="text" id="nickname" name="nickname"
                       class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                       value="">
            </div>
            
            <!-- 添加修改背景图按钮 -->
            <div>
                <label class="block text-sm font-medium text-gray-700">主页背景</label>
                <button id="change-background-btn"
                        class="mt-1 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                    <i class="fa fa-image mr-2"></i> 修改主页背景
                </button>
            </div>

            <div class="pt-4 flex justify-end space-x-3">
                <button id="save-profile"
                        class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    保存修改
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 添加背景图片上传模态框 -->
<div class="avatar-upload-modal" id="backgroundUploadModal">
    <div class="modal-content">
        <h3 class="text-xl font-bold mb-4 text-dark">更换主页背景</h3>
        <div class="preview-container bg-gray-200" style="border-radius: 8px; width: 100%; height: 200px; overflow: hidden;">
            <img src="" alt="预览背景" class="preview-image" id="backgroundPreview" style="width: 100%; height: 100%; object-fit: cover;">
        </div>
        <button class="upload-btn" id="selectBackgroundBtn">选择图片</button>
        <input type="file" id="backgroundFileInput" class="file-input" accept="image/*">
        <div class="mt-4">
            <button class="upload-btn" id="confirmBackgroundUploadBtn">确认上传</button>
            <button class="cancel-btn" id="cancelBackgroundUploadBtn">取消</button>
            <button class="cancel-btn ml-2" id="resetBackgroundBtn" style="background-color: #f44336;">
                <i class="fa fa-refresh mr-1"></i> 重置为默认
            </button>
        </div>
        <div class="mt-3 text-red-500 hidden" id="backgroundUploadError">上传失败，请重试</div>
        <div class="mt-3 text-green-500 hidden" id="backgroundUploadSuccess">上传成功</div>
    </div>
</div>

<!-- 主页横幅 -->
<section id="home" class="pt-24 md:pt-32 pb-16 md:pb-24 bg-cover bg-center relative">
    <div class="absolute inset-0 bg-black bg-opacity-30"></div>
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div id="coupleAvatarsContainer"
             class="avatar-row-container mb-10 sm:mb-16 hidden">
             <div class="img-male avatar-item">
		<img src="" draggable="false"
                     class="w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 rounded-full border-4 border-white shadow-lg object-cover avatar-clickable"
                     id="partner1Avatar">
                <span class="text-white font-medium mt-2 block text-center" id="partner1Name"></span>
            </div>

            <div class="love-icon animate-pulse">
                <img src="/Style/img/like.svg" draggable="false" class="w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16">
            </div>
             <div class="img-female avatar-item">
                <img src="" draggable="false"
                     class="w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 rounded-full border-4 border-white shadow-lg object-cover"
                     id="partner2Avatar">
                <span class="text-white font-medium mt-2 block text-center" id="partner2Name"></span>
            </div>
        </div>
        <!-- 关系状态区域 -->
        <div class="relative z-10 mb-[-30px] md:mb-[-40px] flex justify-center">
            <!-- 已绑定情侣关系时显示 -->
            <div id="relationship-established"
                 class="hidden time-container bg-white bg-opacity-90 rounded-xl p-6 sm:p-8 inline-block shadow-xl max-w-md w-full text-center">
                 <span id="anniversaryPrompt" class="block mt-2"></span>
                <span id="anniversaryTitle" class="text-dark font-medium mr-2">我们从</span>
                <span id="anniversaryDate" class="text-primary font-medium mr-2"></span>
                <span class="text-dark font-medium mr-2">开始，已经走过了</span>
                <div class="inline-flex items-center mt-2">
                    <b id="tian" class="text-primary text-2xl md:text-3xl mx-1">0</b>
                    <b class="text-dark text-xl md:text-2xl mx-1">天</b>
                    <b id="shi" class="text-primary text-2xl md:text-3xl mx-1">0</b>
                    <b class="text-dark text-xl md:text-2xl mx-1">时</b>
                    <b id="fen" class="text-primary text-2xl md:text-3xl mx-1">0</b>
                    <b class="text-dark text-xl md:text-2xl mx-1">分</b>
                    <b id="miao" class="text-primary text-2xl md:text-3xl mx-1">0</b>
                    <b class="text-dark text-xl md:text-2xl mx-1">秒</b>
                </div>
                <div>
                    <span class="text-dark font-notoserif text-shadow leading-relaxed">喜欢花 喜欢浪漫 喜欢你.</span>
                </div>
            </div>

            <!-- 未绑定情侣关系时显示 -->
            <div id="no-relationship"
                 class="time-container bg-white bg-opacity-90 rounded-xl p-6 sm:p-8 inline-block shadow-xl max-w-md w-full text-center">
                <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fa fa-heart-o text-primary text-2xl"></i>
                </div>
                <p class="text-gray-600 mb-4">还没有绑定情侣关系</p>
                <a href="/couple"
                   class="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-6 rounded-lg transition-colors inline-flex items-center">
                    <i class="fa fa-link mr-2"></i>绑定情侣
                </a>
            </div>
        </div>
    </div>
</section>

<!-- 卡片区域 -->
<section class="section-padding bg-neutral">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="text-[clamp(1.8rem,5vw,2.5rem)] font-bold text-dark mb-3">我们的爱情小窝</h2>
            <p class="text-gray-600 max-w-2xl mx-auto">记录属于我们的每一个珍贵瞬间，让爱在这里慢慢生长</p>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
            <!-- 点点滴滴 -->
            <div class="card bg-white rounded-xl shadow-md p-6 sm:p-8 card-hover transform transition-all duration-300 hover:shadow-xl">
                <div class="flex flex-col items-center text-center h-full">
                    <div class="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mb-6">
                        <img src="/Style/img/diandian.png" class="w-12 h-12 object-contain" alt="点点滴滴图标">
                    </div>
                    <div class="text">
                        <span class="block text-xl font-bold text-dark mb-3"><a target="_self" href="/moments"
                                                                                class="hover:text-primary transition-colors">点点滴滴</a></span>
                        <p class="text-gray-600 flex-grow">有人愿意听你碎碎念念也很浪漫</p>
                    </div>
                    <div class="mt-6">
                        <a href="/moments"
                           class="inline-block px-5 py-2 bg-primary text-white rounded-full hover:bg-primary/90 transition-colors">
                            查看 <i class="fa fa-arrow-right ml-1"></i>
                        </a>
                    </div>
                </div>
            </div>

            <!-- 留言板 -->
            <div class="card bg-white rounded-xl shadow-md p-6 sm:p-8 card-hover transform transition-all duration-300 hover:shadow-xl">
                <div class="flex flex-col items-center text-center h-full">
                    <div class="w-20 h-20 rounded-full bg-secondary/10 flex items-center justify-center mb-6">
                        <img src="/Style/img/liuyan.png" class="w-12 h-12 object-contain" alt="留言板图标">
                    </div>
                    <div class="text">
                        <span class="block text-xl font-bold text-dark mb-3"><a target="_self" href="/messages"
                                                                                class="hover:text-primary transition-colors">留言板</a></span>
                        <p class="text-gray-600 flex-grow">在这里写下我们的留言祝福</p>
                    </div>
                    <div class="mt-6">
                        <a href="/messages"
                           class="inline-block px-5 py-2 bg-secondary text-white rounded-full hover:bg-secondary/90 transition-colors">
                            留言 <i class="fa fa-pencil ml-1"></i>
                        </a>
                    </div>
                </div>
            </div>
            <!-- Love Photo -->
            <div class="card bg-white rounded-xl shadow-md p-6 sm:p-8 card-hover transform transition-all duration-300 hover:shadow-xl">
                <div class="flex flex-col items-center text-center h-full">
                    <div class="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mb-6">
                        <img src="/Style/img/loveimg.png" class="w-12 h-12 object-contain" alt="Love Photo图标">
                    </div>
                    <div class="text">
                        <span class="block text-xl font-bold text-dark mb-3"><a target="_self" href="/photos"
                                                                                class="hover:text-primary transition-colors">Love Photo</a></span>
                        <p class="text-gray-600 flex-grow">恋爱相册 记录最美瞬间</p>
                    </div>
                    <div class="mt-6">
                        <a href="/photos"
                           class="inline-block px-5 py-2 bg-primary text-white rounded-full hover:bg-primary/90 transition-colors">
                            浏览 <i class="fa fa-image ml-1"></i>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Love List -->
            <div class="card bg-white rounded-xl shadow-md p-6 sm:p-8 card-hover transform transition-all duration-300 hover:shadow-xl">
                <div class="flex flex-col items-center text-center h-full">
                    <div class="w-20 h-20 rounded-full bg-secondary/10 flex items-center justify-center mb-6">
                        <img src="/Style/img/xinf.png" class="w-12 h-12 object-contain" alt="Love List图标">
                    </div>
                    <div class="text">
                        <span class="block text-xl font-bold text-dark mb-3"><a target="_self" href="/lovelist"
                                                                                class="hover:text-primary transition-colors">Love List</a></span>
                        <p class="text-gray-600 flex-grow">恋爱列表 你我之间的约定</p>
                    </div>
                    <div class="mt-6">
                        <a href="/lovelist"
                           class="inline-block px-5 py-2 bg-secondary text-white rounded-full hover:bg-secondary/90 transition-colors">
                            查看 <i class="fa fa-list ml-1"></i>
                        </a>
                    </div>
                </div>
            </div>

            <!-- 爱情纪念 -->
            <div class="card bg-white rounded-xl shadow-md p-6 sm:p-8 card-hover transform transition-all duration-300 hover:shadow-xl">
                <div class="flex flex-col items-center text-center h-full">
                    <div class="w-20 h-20 rounded-full bg-accent/10 flex items-center justify-center mb-6">
                        <img src="/Style/img/about.png" class="w-12 h-12 object-contain" alt="爱情纪念图标">
                    </div>
                    <div class="text">
                        <span class="block text-xl font-bold text-dark mb-3"><a target="_self" href="/couple"
                                                                                class="hover:text-primary transition-colors">爱情纪念</a></span>
                        <p class="text-gray-600 flex-grow">重要日子 我们共同铭记</p>
                    </div>
                    <div class="mt-6">
                        <a href="/couple"
                           class="inline-block px-5 py-2 bg-accent text-white rounded-full hover:bg-accent/90 transition-colors">
                            查看 <i class="fa fa-calendar ml-1"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 页脚 -->
<footer class="bg-dark text-white py-12">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="mb-8 md:mb-0 text-center md:text-left">
                <div class="flex items-center space-x-2 mb-4 justify-center md:justify-start">
                    <span class="text-lg font-bold" id="footerLogo"></span>
                </div>
                <p class="text-gray-400 max-w-md mx-auto md:mx-0">
                    喜欢花 喜欢浪漫 喜欢你.~
                </p>
                <p> © 2025 爱情小窝 </p>
            </div>
        </div>
    </div>
</footer>

<!-- 头像上传模态框 -->
<div class="avatar-upload-modal" id="avatarUploadModal">
    <div class="modal-content">
        <h3 class="text-xl font-bold mb-4 text-dark">更换头像</h3>
        <div class="preview-container">
            <img src="" alt="预览头像" class="preview-image" id="avatarPreview">
        </div>
        <button class="upload-btn" id="selectImageBtn">选择图片</button>
        <input type="file" id="avatarFileInput" class="file-input" accept="image/*">
        <div class="mt-4">
            <button class="upload-btn" id="confirmUploadBtn">确认上传</button>
            <button class="cancel-btn" id="cancelUploadBtn">取消</button>
        </div>
        <div class="mt-3 text-red-500 hidden" id="uploadError">上传失败，请重试</div>
        <div class="mt-3 text-green-500 hidden" id="uploadSuccess">上传成功</div>
    </div>
</div>

<script>
    // 全局变量存储纪念日和用户信息
    let anniversaryDate = null;
    let currentUser = null;
    let inRelationship = false; // 记录是否已绑定情侣关系
    let partnerName = ''; // 存储伴侣昵称
    let partnerAvatar = ''; // 存储伴侣头像

    // 初始化页面
    $(document).ready(function () {
        // 检查登录状态
        checkLoginStatus();

        // 获取纪念日信息
        fetchAnniversary();

        // 初始化导航栏滚动效果
        initNavbarScroll();

        // 初始化移动端菜单
        initMobileMenu();

        // 初始化退出登录功能
        initLogout();

        // 初始化头像上传功能
        initAvatarUpload();

        // 初始化个人资料弹窗
        initProfileModal();
        // 初始化背景上传功能
        initBackgroundUpload();
          // 初始化背景音乐
		initBackgroundMusic();

        // 点击其他地方关闭操作菜单和用户菜单
        document.addEventListener('click', function(event) {
            // 检查点击目标是否是用户菜单按钮或其内部元素
            const isUserMenuButton = event.target.closest('#user-menu-button, #mobile-menu-button');
            // 检查点击目标是否是个人资料弹窗或其内部元素
            const isProfileModal = event.target.closest('#profile-modal');

            // 如果点击的不是用户菜单按钮或弹窗本身，则关闭弹窗
            if (!isUserMenuButton && !isProfileModal) {
                document.querySelectorAll('.anniversary-actions').forEach(el => {
                    el.classList.add('hidden');
                });

                const profileModal = document.getElementById('profile-modal');
                if (profileModal && profileModal.style.display !== 'none') {
                    profileModal.style.display = 'none';
                }
            }
        });

        // 用户菜单切换
        const userMenuButtons = document.querySelectorAll('#user-menu-button, #mobile-menu-button');
        userMenuButtons.forEach(button => {
            button.addEventListener('click', function(event) {
                // 阻止事件冒泡，避免触发全局点击事件
                event.stopPropagation();
                const profileModal = document.getElementById('profile-modal');
                profileModal.style.display = profileModal.style.display === 'flex' ? 'none' : 'flex';

                // 加载用户信息到弹窗
                if (currentUser) {
<!--                    document.getElementById('user-id').textContent = currentUser.id;-->
                    document.getElementById('username').textContent = currentUser.name;
                    document.getElementById('nickname').value = currentUser.nickname || '';
                }
            });
        });
    });


// 背景音乐控制
function initBackgroundMusic() {
    const audio = document.getElementById('backgroundMusic');
    const controller = document.getElementById('musicController');
    const icon = document.getElementById('musicIcon');
    
    // 尝试自动播放音乐（处理浏览器自动播放限制）
    function tryAutoPlay() {
        audio.volume = 0.3; // 设置初始音量
        
        // 尝试直接播放
        audio.play().then(() => {
            controller.classList.add('playing');
            icon.classList.remove('fa-music');
            icon.classList.add('fa-pause');
        }).catch(error => {
            console.log('自动播放失败，等待用户交互:', error);
            // 自动播放失败时不做任何操作，等待用户点击
        });
    }
    
    // 点击控制器切换播放状态
    controller.addEventListener('click', () => {
        if (audio.paused) {
            audio.play();
            controller.classList.add('playing');
            icon.classList.remove('fa-music');
            icon.classList.add('fa-pause');
        } else {
            audio.pause();
            controller.classList.remove('playing');
            icon.classList.remove('fa-pause');
            icon.classList.add('fa-music');
        }
    });
    
		// 页面加载完成后尝试自动播放
		tryAutoPlay();
		
		// 监听页面交互事件，一旦有用户交互就尝试播放
		['click', 'touchstart', 'keydown'].forEach(event => {
			document.addEventListener(event, function playOnInteraction() {
				audio.play().then(() => {
					controller.classList.add('playing');
					icon.classList.remove('fa-music');
					icon.classList.add('fa-pause');
					// 移除所有事件监听器，避免重复触发
					['click', 'touchstart', 'keydown'].forEach(e => {
						document.removeEventListener(e, playOnInteraction);
					});
				}).catch(error => {
					console.log('用户交互后播放失败:', error);
				});
			}, { once: true }); // 每个事件只监听一次
		});
	}






    // 初始化个人资料弹窗
    function initProfileModal() {
        const profileModal = document.getElementById('profile-modal');
        const closeModalBtn = document.getElementById('close-modal');

        // 关闭弹窗
        closeModalBtn.addEventListener('click', function() {
            profileModal.style.display = 'none';
        });

        // 点击弹窗外部关闭
        profileModal.addEventListener('click', function(e) {
            if (e.target === profileModal) {
                profileModal.style.display = 'none';
            }
        });

        // 保存昵称修改
        document.getElementById('save-profile').addEventListener('click', function() {
            if (!currentUser) return;

            const newNickname = document.getElementById('nickname').value.trim();

            if (!newNickname) {
                alert('昵称不能为空');
                return;
            }

            // 显示加载状态
            this.disabled = true;
            this.textContent = '保存中...';

            fetch(`/api/users/${currentUser.id}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ nickname: newNickname })
            })
            .then(response => {
                if (!response.ok) {
                    return response.json().then(data => {
                        throw new Error(data.message || '修改失败');
                    });
                }
                return response.json();
            })
            .then(data => {
                if (data.status === 'success') {
                    alert('昵称修改成功');
                    profileModal.style.display = 'none';
                    // 更新当前用户信息
                    currentUser.nickname = newNickname;
                    // 更新页面上显示的昵称
                    updateDisplayedNickname(newNickname);
                    // 更新情侣关系标识
                    checkRelationshipStatus();
                }
            })
            .catch(error => {
                alert(error.message);
                console.error('修改昵称时出错:', error);
            })
            .finally(() => {
                // 恢复按钮状态
                this.disabled = false;
                this.textContent = '保存修改';
            });
        });
    }

	// 初始化背景图片上传功能
	function initBackgroundUpload() {
		// 获取DOM元素
		const backgroundUploadModal = $('#backgroundUploadModal');
		const changeBackgroundBtn = $('#change-background-btn');
		const selectBackgroundBtn = $('#selectBackgroundBtn');
		const backgroundFileInput = $('#backgroundFileInput');
		const backgroundPreview = $('#backgroundPreview');
		const confirmBackgroundUploadBtn = $('#confirmBackgroundUploadBtn');
		const cancelBackgroundUploadBtn = $('#cancelBackgroundUploadBtn');
		const resetBackgroundBtn = $('#resetBackgroundBtn');
		const backgroundUploadError = $('#backgroundUploadError');
		const backgroundUploadSuccess = $('#backgroundUploadSuccess');
		const profileModal = $('#profile-modal');
		
		// 加载当前背景图作为预览
		function loadCurrentBackground() {
			const DEFAULT_BACKGROUND = '/uploads/bjtp.webp';
			
			$.get('/api/background', function(data) {
				if (data.status === 'success' && data.url) {
					backgroundPreview.attr('src', data.url || DEFAULT_BACKGROUND);
				} else {
					backgroundPreview.attr('src', DEFAULT_BACKGROUND);
				}
			}).fail(function() {
				// 失败时使用默认背景
				backgroundPreview.attr('src', DEFAULT_BACKGROUND);
			});
		}

		
		// 点击修改背景图按钮
		changeBackgroundBtn.click(function() {
			// 关闭个人资料弹窗
			profileModal.hide();
			
			// 显示背景上传模态框
			backgroundUploadModal.css('display', 'flex');
			
			// 加载当前背景作为预览
			loadCurrentBackground();
			
			// 重置状态
			backgroundUploadError.addClass('hidden');
			backgroundUploadSuccess.addClass('hidden');
		});
		
		// 选择图片按钮点击事件
		selectBackgroundBtn.click(function() {
			backgroundFileInput.click();
		});
		
		// 选择图片后预览
		backgroundFileInput.change(function(e) {
			const file = e.target.files[0];
			if (file) {
				const reader = new FileReader();
				reader.onload = function(e) {
					backgroundPreview.attr('src', e.target.result);
				}
				reader.readAsDataURL(file);
			}
		});
		
		// 确认上传按钮点击事件
		confirmBackgroundUploadBtn.click(function() {
			const file = backgroundFileInput[0].files[0];
			if (!file) {
				backgroundUploadError.text('请选择图片').removeClass('hidden');
				return;
			}
			
			// 创建FormData对象
			const formData = new FormData();
			formData.append('file', file);
			
			// 上传图片
			$.ajax({
				url: '/api/upload/background',
				type: 'POST',
				data: formData,
				processData: false,
				contentType: false,
				success: function(response) {
					if (response.status === 'success') {
						// 上传成功后更新背景
						$('#home').css('background-image', `url('${response.url}')`);
						backgroundUploadSuccess.removeClass('hidden');
						
						// 2秒后关闭模态框
						setTimeout(function() {
							backgroundUploadModal.css('display', 'none');
							backgroundFileInput.val(''); // 清空文件输入
						}, 2000);
					} else {
						backgroundUploadError.text(response.message || '上传失败，请重试').removeClass('hidden');
					}
				},
				error: function() {
					backgroundUploadError.text('上传失败，请重试').removeClass('hidden');
				}
			});
		});
		
		// 取消按钮点击事件
		cancelBackgroundUploadBtn.click(function() {
			backgroundUploadModal.css('display', 'none');
			backgroundFileInput.val(''); // 清空文件输入
			backgroundUploadError.addClass('hidden');
			backgroundUploadSuccess.addClass('hidden');
		});
		
		// 重置为默认背景
		resetBackgroundBtn.click(function() {
		const DEFAULT_BACKGROUND = '/uploads/bjtp.webp';
		
		if (confirm('确定要将背景图重置为默认吗？')) {
			$.ajax({
				url: '/api/background',
				type: 'DELETE',
				success: function(response) {
					if (response.status === 'success') {
						// 重置为默认背景
						$('#home').css('background-image', `url('${DEFAULT_BACKGROUND}')`);
						backgroundPreview.attr('src', DEFAULT_BACKGROUND);
						backgroundUploadSuccess.text('已重置为默认背景').removeClass('hidden');
						
						setTimeout(function() {
							backgroundUploadModal.css('display', 'none');
						}, 2000);
					} else {
						backgroundUploadError.text(response.message || '操作失败').removeClass('hidden');
					}
				},
				error: function() {
					backgroundUploadError.text('操作失败，请重试').removeClass('hidden');
				}
			});
		}
	});
		
		// 页面加载时获取并设置当前背景
		function setInitialBackground() {
			// 定义默认背景图
			const DEFAULT_BACKGROUND = '/uploads/bjtp.webp';
			
			// 先显示默认背景，避免加载过程中空白
			$('#home').css('background-image', `url('${DEFAULT_BACKGROUND}')`);
			
			// 从API获取实际背景图
			$.get('/api/background', function(data) {
				if (data.status === 'success' && data.url) {
					// 使用API返回的背景图，如果为空则使用默认值
					const backgroundUrl = data.url || DEFAULT_BACKGROUND;
					$('#home').css('background-image', `url('${backgroundUrl}')`);
				} else {
					// API返回错误时使用默认值
					$('#home').css('background-image', `url('${DEFAULT_BACKGROUND}')`);
				}
			}).fail(function() {
				// 请求失败时使用默认值
				console.log('获取背景图失败，使用默认背景');
				$('#home').css('background-image', `url('${DEFAULT_BACKGROUND}')`);
			});
		}

		
		// 初始加载背景图
		setInitialBackground();
	}






    // 初始化头像上传功能
    function initAvatarUpload() {
        // 获取DOM元素
        const avatarUploadModal = $('#avatarUploadModal');
        const selectImageBtn = $('#selectImageBtn');
        const avatarFileInput = $('#avatarFileInput');
        const avatarPreview = $('#avatarPreview');
        const confirmUploadBtn = $('#confirmUploadBtn');
        const cancelUploadBtn = $('#cancelUploadBtn');
        const uploadError = $('#uploadError');
        const uploadSuccess = $('#uploadSuccess');

        // 点击头像打开上传模态框
        $('#userAvatar, #mobileUserAvatar, #partner1Avatar').click(function() {
            if (currentUser) {
                // 显示模态框
                avatarUploadModal.css('display', 'flex');

                // 设置预览图为当前头像
                const currentAvatar = $(this).attr('src');
                avatarPreview.attr('src', currentAvatar);

                // 重置状态
                uploadError.addClass('hidden');
                uploadSuccess.addClass('hidden');
            }
        });

        // 选择图片按钮点击事件
        selectImageBtn.click(function() {
            avatarFileInput.click();
        });

        // 选择图片后预览
        avatarFileInput.change(function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    avatarPreview.attr('src', e.target.result);
                }
                reader.readAsDataURL(file);
            }
        });

        // 确认上传按钮点击事件
        confirmUploadBtn.click(function() {
            const file = avatarFileInput[0].files[0];
            if (!file) {
                uploadError.text('请选择图片').removeClass('hidden');
                return;
            }

            // 创建FormData对象
            const formData = new FormData();
            formData.append('file', file);

            // 上传图片
            $.ajax({
                url: '/api/upload',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.status === 'success') {
                        // 上传成功后更新用户头像
                        updateUserAvatar(response.url);
                        uploadSuccess.removeClass('hidden');

                        // 2秒后关闭模态框
                        setTimeout(function() {
                            avatarUploadModal.css('display', 'none');
                            avatarFileInput.val(''); // 清空文件输入
                        }, 2000);
                    } else {
                        uploadError.text(response.message || '上传失败，请重试').removeClass('hidden');
                    }
                },
                error: function() {
                    uploadError.text('上传失败，请重试').removeClass('hidden');
                }
            });
        });

        // 取消按钮点击事件
        cancelUploadBtn.click(function() {
            avatarUploadModal.css('display', 'none');
            avatarFileInput.val(''); // 清空文件输入
            uploadError.addClass('hidden');
            uploadSuccess.addClass('hidden');
        });
    }

    // 更新用户头像到数据库
    function updateUserAvatar(avatarUrl) {
        if (!currentUser) return;

        $.ajax({
            url: `/api/users/${currentUser.id}`,
            type: 'PUT',
            contentType: 'application/json',
            data: JSON.stringify({ avatar: avatarUrl }),
            success: function(response) {
                if (response.status === 'success') {
                    // 更新当前用户信息
                    currentUser.avatar = avatarUrl;

                    // 更新页面上的所有头像显示
                    $('#userAvatar').attr('src', avatarUrl);
                    $('#mobileUserAvatar').attr('src', avatarUrl);
                    $('#partner1Avatar').attr('src', avatarUrl);

                    // 如果已绑定关系，更新情侣头像区域
                    if (inRelationship) {
                        showCoupleAvatars();
                    }
                }
            },
            error: function() {
                console.error('更新头像信息失败');
            }
        });
    }

    // 检查情侣关系状态并更新页面标识
    function checkRelationshipStatus() {
        if (!currentUser) {
            // 未登录状态，1秒后再次尝试
            setTimeout(checkRelationshipStatus, 1000);
            return;
        }

        $.get('/api/couple/relationship', function (data) {
            inRelationship = data.in_relationship || false;

            // 如果已绑定关系，获取伴侣信息
            if (inRelationship && data.partner) {
                partnerName = data.partner.nickname;
                partnerAvatar = data.partner.avatar; // 获取伴侣头像
                updatePageIdentifiers(true);
                // 显示情侣头像区域并更新信息
                showCoupleAvatars();
            } else {
                // 未绑定关系，只显示自己的昵称
                updatePageIdentifiers(false);
                // 隐藏情侣头像区域
                hideCoupleAvatars();
            }

            // 根据关系状态显示不同内容
            if (inRelationship) {
                $('#no-relationship').addClass('hidden');
                $('#relationship-established').removeClass('hidden');
            } else {
                $('#relationship-established').addClass('hidden');
                $('#no-relationship').removeClass('hidden');
            }
        }).fail(function () {
            // 请求失败时默认显示未绑定状态
            $('#relationship-established').addClass('hidden');
            $('#no-relationship').removeClass('hidden');
            updatePageIdentifiers(false);
            hideCoupleAvatars();
        });
    }

    // 显示情侣头像区域并更新信息
    function showCoupleAvatars() {
        // 设置自己的头像和昵称
        $('#partner1Avatar').attr('src', currentUser.avatar || 'default_avatar.jpg');
        $('#partner1Name').text(currentUser.nickname);

        // 设置恋人的头像和昵称
        $('#partner2Avatar').attr('src', partnerAvatar || 'default_avatar.jpg');
        $('#partner2Name').text(partnerName);

        // 显示整个容器
        $('#coupleAvatarsContainer').removeClass('hidden');
    }

    // 隐藏情侣头像区域
    function hideCoupleAvatars() {
        $('#coupleAvatarsContainer').addClass('hidden');
    }


    // 更新页面标题、关键词和标识
    function updatePageIdentifiers(hasRelationship) {
        const myName = currentUser ? currentUser.nickname : '无名';

        if (hasRelationship && partnerName) {
            // 已绑定关系：显示 "自己昵称 ❤️ 对方昵称"
            const combinedName = `${myName} ❤️${partnerName}`;

            // 更新页面标题
            $('#pageTitle').text(combinedName);

            // 更新关键词
            $('#pageKeywords').attr('content', `${combinedName},Like Girl, 情侣小窝`);

            // 更新logo文本
            $('#logoText').html(`${myName} <div class="heart"></div> ${partnerName}`);
            $('#footerLogo').html(`${myName} <div class="heart"></div> ${partnerName}`);
        } else {
            // 未绑定关系：只显示自己的昵称
            // 更新页面标题
            $('#pageTitle').text(myName+ "的小窝");

            // 更新关键词
            $('#pageKeywords').attr('content', `${myName},Like Girl, 情侣小窝`);

            // 更新logo文本
            $('#logoText').text(myName);
            $('#footerLogo').text(myName);
        }
    }

    // 检查登录状态
    function checkLoginStatus() {
        $.get('/api/user', function (data) {
            if (data.id) {
                currentUser = data;
                showLoggedInState();
                loadUserAvatar();
                // 登录成功后检查情侣关系状态
                checkRelationshipStatus();
            } else {
                currentUser = null;
                showLoggedOutState();
                // 未登录状态下使用默认名称
                updatePageIdentifiers(false);
            }
        }).fail(function () {
            currentUser = null;
            showLoggedOutState();
            updatePageIdentifiers(false);
        });
    }

    // 显示已登录状态
    function showLoggedInState() {
        $('#loginArea').hide();
        $('#mobileLoginBtn').hide();
        $('#loggedInArea').removeClass('hidden').addClass('flex');
        $('#mobileLoggedInArea').removeClass('hidden');

        $('#userName').text(currentUser.nickname);
        $('#mobileUserName').text(currentUser.nickname);
    }

    // 显示未登录状态
    function showLoggedOutState() {
        $('#loggedInArea').addClass('hidden').removeClass('flex');
        $('#mobileLoggedInArea').addClass('hidden');
        $('#loginArea').show();
        $('#mobileLoginBtn').show();
    }

    // 加载用户头像
    function loadUserAvatar() {
        // 设置导航栏头像
        $('#userAvatar').attr('src', currentUser.avatar || 'default_avatar.jpg');
        $('#mobileLoggedInArea img').attr('src', currentUser.avatar || 'default_avatar.jpg');
    }


      // 更新时间计算函数以适应新逻辑
      function updateAnniversaryTime() {
        // 确保纪念日日期已正确设置且已绑定关系
        if (!anniversaryDate || !inRelationship) {
            // 没有恋爱开始日或未绑定关系，不更新倒计时
            setTimeout(updateAnniversaryTime, 1000);
            return;
        }

        // 正常的时间计算逻辑（保持不变）
        const now = new Date();
        const timeDiff = now - anniversaryDate;

        const totalSeconds = Math.floor(timeDiff / 1000);
        const days = Math.floor(totalSeconds / (60 * 60 * 24));
        const hours = Math.floor((totalSeconds % (60 * 60 * 24)) / (60 * 60));
        const minutes = Math.floor((totalSeconds % (60 * 60)) / 60);
        const seconds = totalSeconds % 60;

        const formatNumber = (num) => num.toString().padStart(2, '0');

        $('#tian').text(days);
        $('#shi').text(formatNumber(hours));
        $('#fen').text(formatNumber(minutes));
        $('#miao').text(formatNumber(seconds));

        setTimeout(updateAnniversaryTime, 1000);
       }


     // 获取纪念日信息
     function fetchAnniversary() {
        // 优先尝试从接口获取
        $.get('/api/anniversaries', function (data) {
            // 查找恋爱开始日
            const loveAnniversary = data.find(item => item.type === 'love_start');

            if (loveAnniversary) {
                // 找到恋爱开始日 - 显示日期和倒计时
                anniversaryDate = new Date(loveAnniversary.date);
                $('#anniversaryDate').text(loveAnniversary.date);
                $('#anniversaryCountdown').removeClass('hidden'); // 显示倒计时
            } else {
                // 没有找到恋爱开始日 - 不展示日期，只显示提示
                anniversaryDate = null;
                $('#anniversaryDate').empty();
                $('#anniversaryDate').text("未设置恋爱纪念日");
                if (data.length > 0) {
                    // 有其他纪念日但没有恋爱开始日 - 显示提示
                    $('#anniversaryPrompt').html(`
                        <span class="text-yellow-500">
                            请添加 恋爱关系确立 纪念日
                            <a href="/couple" class="underline font-bold text-1g">去添加</a>
                        </span>
                    `);
                } else {
                    // 没有任何纪念日 - 显示提示
                    $('#anniversaryPrompt').html(`
                        <span class="text-yellow-500">
                            还没有添加任何纪念日，<a href="/couple" class="underline font-bold text-1g">去添加</a>
                        </span>
                    `);
                }
                $('#anniversaryCountdown').addClass('hidden'); // 隐藏倒计时
            }
            // 启动时间更新
            updateAnniversaryTime();
        }).fail(function () {
            // 接口请求失败时的处理
            console.log('接口请求失败，使用默认处理');
            anniversaryDate = null;
            $('#anniversaryDate').empty(); // 清空日期显示
            $('#anniversaryPrompt').html(`
                <span class="text-yellow-500">
                    数据加载失败，请稍后重试
                </span>
            `);
            $('#anniversaryCountdown').addClass('hidden'); // 隐藏倒计时
            updateAnniversaryTime();
        });
     }



    // 初始化导航栏滚动效果
    function initNavbarScroll() {
        window.onscroll = function () {
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            const navbar = document.getElementById('navbar');
            const wenan = document.querySelectorAll('.wenan');
            const alogo = document.querySelector('.alogo');

            if (scrollTop > 500) {
                navbar.classList.add('bg-white', 'shadow-md');
                navbar.classList.remove('bg-transparent');

                wenan.forEach(item => {
                    item.classList.remove('text-white');
                    item.classList.add('text-dark');
                });

                alogo.classList.remove('text-white');
                alogo.classList.add('text-dark');

                // 更新已登录用户信息颜色
                $('#userName, #loggedInArea button').removeClass('text-white').addClass('text-dark');
            } else {
                navbar.classList.remove('bg-white', 'shadow-md');
                navbar.classList.add('bg-transparent');

                wenan.forEach(item => {
                    item.classList.add('text-white');
                    item.classList.remove('text-dark');
                });

                alogo.classList.add('text-white');
                alogo.classList.remove('text-dark');

                // 更新已登录用户信息颜色
                $('#userName, #loggedInArea button').addClass('text-white').removeClass('text-dark');
            }
        };

        // 初始触发一次滚动事件
        window.onscroll();
    }

    // 初始化移动端菜单
    function initMobileMenu() {
        $('#menuBtn').click(function (e) {
            e.stopPropagation(); // 防止触发全局点击事件
            $('#mobileMenu').toggleClass('hidden');
            // 切换图标
            const icon = $(this).find('i');
            if (icon.hasClass('fa-bars')) {
                icon.removeClass('fa-bars').addClass('fa-times');
            } else {
                icon.removeClass('fa-times').addClass('fa-bars');
            }
        });

        // 点击菜单外部关闭
        $(document).click(function() {
            if (!$('#mobileMenu').hasClass('hidden')) {
                $('#mobileMenu').addClass('hidden');
                $('#menuBtn i').removeClass('fa-times').addClass('fa-bars');
            }
        });
    }

    // 初始化退出登录功能
    function initLogout() {
        // 退出登录功能已整合到个人资料弹窗中
        // 这里保留空函数，确保兼容性
    }

    // 更新页面上显示的昵称
    function updateDisplayedNickname(nickname) {
        $('#userName').text(nickname);
        $('#mobileUserName').text(nickname);
        $('#partner1Name').text(nickname);
    }

    // 加载情侣请求列表（修复之前的引用错误）
    function loadCoupleRequests() {
        // 如果需要实现情侣请求功能，可以在这里添加代码
    }

</script>
</body>
</html>
